
<template>
  <div class="basicSet">
    <div>
      <span class="title">机器人名称</span>
      <el-input style="width: 300px;" v-model="robotName"></el-input>
    </div>
    <div class="setContent">
      <span class="title">服务账号</span>
      <el-select style="width: 300px;" v-model="accountId" multiple>
        <el-option
          v-for="item in accountList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <p class="tip">渠道有多个机器人时，将接入最新创建的机器人</p>

    </div>
    <div class="setContent">
      <span class="title">回复类型</span>
      <el-select style="width: 300px;" v-model="msgType" multiple>
        <el-option
          v-for="item in messageType"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <el-button class="btnBox" round type="primary" @click="saveBot">保存</el-button>
  </div>
</template>

<script setup>
import {reactive, onMounted, inject, ref} from "vue"
import {get_bind_robot_detail, update_keyword_auto_reply_robot} from "@/api/settingtApi"
import {get_robot_binding_account_list} from "@/api/dropDown"
import {ElMessage} from "element-plus";
const currentBotId = inject("currentBotId")
const robotName = ref("")
const accountId = ref([])
const messageType = ref([
  {value: 1, label: '私信'},
  {value: 2, label: '评论'},
  {value: 3, label: '进入聊天框'},
])
const msgType = ref([])
const useStatus = ref(1)
onMounted(() => {
  getAccountList()
  getBotInfo()
})
const emits = defineEmits(["setBotName"])
const getBotInfo = () => {
  get_bind_robot_detail({id: currentBotId}).then(res => {
    let data = res.data
    robotName.value = data.robotName
    if(data.usePlatformAccount.length) {
      accountId.value = data.usePlatformAccount.map(el => el.openId)
    }else {
      accountId.value = []
    }
    msgType.value = (data.msgType ? data.msgType.split(",") : []).map(el => parseInt(el))
    useStatus.value = data.useStatus
    emits("setBotName", robotName.value)
  })
}
const accountList = ref([])
const getAccountList = () => {
  get_robot_binding_account_list().then((res) => {
    accountList.value = res.data || []
  })
}

const saveBot = () => {
  if(!robotName.value) {
    ElMessage.warning('请输入名称!')
    return
  }
  if(!accountId.value.length) {
    ElMessage.warning('请选择服务账号!')
    return
  }
  if(!msgType.value.length) {
    ElMessage.warning('请选择回复类型!')
    return
  }
  update_keyword_auto_reply_robot({
    id: currentBotId,
    robotName: robotName.value,
    msgType: msgType.value.join(","),
    useAccount: accountId.value.join(','),
    useStatus: useStatus.value
  }).then(res => {
    ElMessage.success(res.msg)
    getBotInfo()
  })
}
</script>
<style scoped lang="scss">
.basicSet{
  padding: 20px;
  &>div {
    margin: 30px 20px;
    .tip {
      margin: 20px 0 20px 70px;
      color: $fontSizeColor;
    }
  }
}
.title {
  display: inline-block;
  text-align: right;
  margin-right: 10px;
  width: 60px;
}
.btnBox {
  margin-left: 80px;
}
</style>